<!--
Copyright 2013 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!DOCTYPE html><meta charset="UTF-8">
<style>
div.anim {
  position: relative;
  left: 0px;
}
</style>

<div id="anim" class="anim"></div>

<script src="../bootstrap.js"></script>
<script>
'use strict';

test(function() {

function assert_object_equals(actual, expected, message) {
    assert_equals(JSON.stringify(actual), JSON.stringify(expected), message);
}
function assert_shadow_equals(actual, expected, message) {
  assert_not_equals(typeof actual, 'undefined', 'actual not undefined: ' + message);
  assert_equals(actual.length, expected.length, 'actual and expected lengths match: ' + message);
  for (var i = 0; i < expected.length; i++) {
    var a = actual[i];
    var e = expected[i];

    // hOffset and vOffset are always required
    assert_object_equals(a['hOffset'], e['hOffset'], 'hOffset matches: ' + message);
    assert_object_equals(a['vOffset'], e['vOffset'], 'vOffset matches: ' + message);

    // Inset is always set
    if (typeof e['inset'] != 'undefined')
      assert_equals(a['inset'], e['inset'], 'inset matches: ' + message);

    if (typeof e['color'] != 'undefined')
      assert_array_equals(a['color'], e['color'], 'color matches: ' + message);

    if (typeof e['blur'] != 'undefined')
      assert_object_equals(a['blur'], e['blur'], 'blur matches: ' + message);

    if (typeof e['spread'] != 'undefined')
      assert_object_equals(a['spread'], e['spread'], 'spread matches: ' + message);
  }
}

var shadowType = window._WebAnimationsTestingUtilities._types['textShadow'];

// Test all the different color types as part of a shadow
var expected = [{
  color: [255, 0, 0, 1.0],
  hOffset: {px: 10},
  vOffset: {px: 15},
  blur: {px: 5},
  inset: false
}];
assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px red'), expected, '10px 15px 5px red');
assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgba(255, 0, 0, 1.0)'), expected, '10px 15px 5px rgba(255, 0, 0, 1.0)');
assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgba(100%, 0, 0, 1.0)'), expected, '10px 15px 5px rgba(100%, 0, 0, 1.0)');
assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgb(255, 0, 0)'), expected, '10px 15px 5px rgb(255, 0, 0)');
assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px rgb(100%, 0, 0)'), expected, '10px 15px 5px rgb(100%, 0, 0)');
assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px hsl(0, 100%, 50%)'), expected, '10px 15px 5px hsl(0, 100%, 50%)');
assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px hsla(0, 100%, 50%, 1.0)'), expected, '10px 15px 5px hsla(0, 100%, 50%, 1.0)');
assert_shadow_equals(shadowType.fromCssValue('10px 15px 5px #ff0000'), expected, '10px 15px 5px #ff0000');
assert_shadow_equals(shadowType.fromCssValue('red 10px 15px 5px'), expected, 'red 10px 15px 5px');
assert_shadow_equals(shadowType.fromCssValue('rgba(255, 0, 0, 1.0) 10px 15px 5px'), expected, 'rgba(255, 0, 0, 1.0) 10px 15px 5px');
assert_shadow_equals(shadowType.fromCssValue('rgba(100%, 0, 0, 1.0) 10px 15px 5px'), expected, 'rgba(100%, 0, 0, 1.0) 10px 15px 5px');
assert_shadow_equals(shadowType.fromCssValue('rgb(255, 0, 0) 10px 15px 5px'), expected, 'rgb(255, 0, 0) 10px 15px 5px');
assert_shadow_equals(shadowType.fromCssValue('rgb(100%, 0, 0) 10px 15px 5px'), expected, 'rgb(100%, 0, 0) 10px 15px 5px');
assert_shadow_equals(shadowType.fromCssValue('hsl(0, 100%, 50%) 10px 15px 5px'), expected, 'hsl(0, 100%, 50%) 10px 15px 5px');
assert_shadow_equals(shadowType.fromCssValue('hsla(0, 100%, 50%, 1.0) 10px 15px 5px'), expected, 'hsla(0, 100%, 50%, 1.0) 10px 15px 5px');
assert_shadow_equals(shadowType.fromCssValue('#ff0000 10px 15px 5px'), expected, '#ff0000 10px 15px 5px');


// [ <color>? <offset-x> <offset-y> <blur-radius>? ]
// [ <offset-x> <offset-y> <blur-radius>? <color>? ]
// [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]


assert_shadow_equals(
 shadowType.fromCssValue('10px 15px'), [{hOffset:{px: 10}, vOffset:{px: 15}}],
 'just offsets');
assert_shadow_equals(
 shadowType.fromCssValue('10px 15px 5px'),
 [{hOffset:{px: 10}, vOffset:{px: 15}, blur: {px: 5}}],
 'no spread');

// Test some 'real world examples', taken from the MDN documentation
assert_shadow_equals(
 shadowType.fromCssValue('1px 2px 3px black, 0 0 1em blue, 0 0 0.2em blue'),
 [{hOffset:{px: 1}, vOffset:{px: 2}, blur: {px: 3}, color: [0, 0, 0, 1.0]},
  {hOffset:{'': 0}, vOffset:{'': 0}, blur: {em: 1}, color: [0, 0, 255, 1.0]},
  {hOffset:{'': 0}, vOffset:{'': 0}, blur: {em: 0.2}, color: [0, 0, 255, 1.0]}],
 'MDN Example 1');

assert_shadow_equals(
 shadowType.fromCssValue('rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px, rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px, rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px'),
 [{hOffset:{px: -1}, vOffset:{'': 0}, color: [0, 0, 0, 0.1]},
  {hOffset:{'': 0}, vOffset:{px: -1}, color: [0, 0, 0, 0.1]},
  {hOffset:{px: 1}, vOffset:{'': 0}, color: [255, 255, 255, 0.1]},
  {hOffset:{'': 0}, vOffset:{px: 1}, color: [255, 255, 255, 0.1]},
  {hOffset:{px: -1}, vOffset:{px: -1}, color: [0, 0, 0, 0.1]},
  {hOffset:{px: 1}, vOffset:{px: 1}, color: [255, 255, 255, 0.1]}],
 'MDN Example 2');

assert_shadow_equals(
 shadowType.fromCssValue('64px 64px 12px 40px rgba(0,0,0,0.4), 12px 12px 0px 8px rgba(0,0,0,0.4) inset'),
 [{hOffset:{px: 64}, vOffset:{px: 64}, blur: {px: 12}, spread: {px: 40}, color: [0, 0, 0, 0.4]},
  {hOffset:{px: 12}, vOffset:{px: 12}, blur: {px: 0}, spread: {px: 8}, color: [0, 0, 0, 0.4], inset: true}],
 'MDN Example 3');

assert_shadow_equals(
 shadowType.fromCssValue('10px 10px 5px #888'),
 [{hOffset:{px: 10}, vOffset:{px: 10}, blur: {px: 5}, color: [136, 136, 136, 1.0]}],
 'MDN Example 4');

}, 'shadowType.cssFromValue');

test(function() {

var colorType = window._WebAnimationsTestingUtilities._types.color;

assert_array_equals(colorType.fromCssValue('#000000'), [0, 0, 0, 1.0], '#000000');
assert_array_equals(colorType.fromCssValue('#000'), [0, 0, 0, 1.0], '#000');
assert_array_equals(colorType.fromCssValue('#123456'), [18, 52, 86, 1.0], '#123456');
assert_array_equals(colorType.fromCssValue('#123'), [17, 34, 51, 1.0], '#123');
assert_array_equals(colorType.fromCssValue('#ffffff'), [255, 255, 255, 1.0], '#ffffff');
assert_array_equals(colorType.fromCssValue('#fff'), [255, 255, 255, 1.0], '#fff');
assert_array_equals(colorType.fromCssValue('#ABCDEF'), [171, 205, 239, 1.0], '#ABCDEF');
assert_array_equals(colorType.fromCssValue('#ABC'), [170, 187, 204, 1.0], '#ABC');

assert_array_equals(colorType.fromCssValue('rgb(0, 0, 0)'), [0, 0, 0, 1.0], 'rgb(0, 0, 0)');
assert_array_equals(colorType.fromCssValue('rgb(0,0,0)'), [0, 0, 0, 1.0], 'rgb(0,0,0)');
assert_array_equals(colorType.fromCssValue('rgb(0%, 0%, 0%)'), [0, 0, 0, 1.0], 'rgb(0%, 0%, 0%)');
assert_array_equals(colorType.fromCssValue('rgb(0%,0%,0%)'), [0, 0, 0, 1.0], 'rgb(0%,0%,0%)');
assert_array_equals(colorType.fromCssValue('rgb(1, 2, 3)'), [1, 2, 3, 1.0], 'rgb(1, 2, 3)');
assert_array_equals(colorType.fromCssValue('rgb(10%, 20%, 30%)'), [26, 51, 77, 1.0], 'rgb(10%, 20%, 30%)');
assert_array_equals(colorType.fromCssValue('rgb(255, 255, 255)'), [255, 255, 255, 1.0], 'rgb(255, 255, 255)');
assert_array_equals(colorType.fromCssValue('rgb(100%, 100%, 100%)'), [255, 255, 255, 1.0], 'rgb(100%, 100%, 100%)');

// Color cliping or RGB - 4.2.1 - RGB color values - Example 6
// em { color: rgb(300,0,0) }       /* clipped to rgb(255,0,0) */
// em { color: rgb(255,-10,0) }     /* clipped to rgb(255,0,0) */
// em { color: rgb(110%, 0%, 0%) }  /* clipped to rgb(100%,0%,0%) */
assert_array_equals(colorType.fromCssValue('rgb(300, 0, 0)'), [255, 0, 0, 1.0], 'rgb(255, 0, 0)');
assert_array_equals(colorType.fromCssValue('rgb(255, -10, 0)'), [255, 0, 0, 1.0], 'rgb(255, -10, 0)');
assert_array_equals(colorType.fromCssValue('rgb(110%, 0%, 0%)'), [255, 0, 0, 1.0], 'rgb(110%, 0, 0)');

assert_array_equals(colorType.fromCssValue('rgba(0, 0, 0, 0)'), [0, 0, 0, 0.0], 'rgba(0, 0, 0, 0)');
assert_array_equals(colorType.fromCssValue('rgba(0,0,0,0)'), [0, 0, 0, 0.0], 'rgba(0,0,0,0)');
assert_array_equals(colorType.fromCssValue('rgba(1, 2, 3, 0.4)'), [1, 2, 3, 0.4], 'rgba(1, 2, 3, 0.4)');
assert_array_equals(colorType.fromCssValue('rgba(1,2,3,0.4)'), [1, 2, 3, 0.4], 'rgba(1,2,3,0.4)');
assert_array_equals(colorType.fromCssValue('rgba(255, 255, 255, 0.5)'), [255, 255, 255, 0.5], 'rgba(255, 255, 255, 0.5)');

// hsl and hsla converted to RGB
var hsl2rgb = window._WebAnimationsTestingUtilities._hsl2rgb;
assert_array_equals(hsl2rgb(0, 0, 100), [255, 255, 255]);
assert_array_equals(hsl2rgb(0, 0, 75), [192, 192, 192]);
assert_array_equals(hsl2rgb(0, 0, 50), [128, 128, 128]);
assert_array_equals(hsl2rgb(0, 0, 0), [0, 0, 0]);
assert_array_equals(hsl2rgb(0, 100, 50), [255, 0, 0]);
assert_array_equals(hsl2rgb(0, 100, 25), [128, 0, 0]);
assert_array_equals(hsl2rgb(60, 100, 50), [255, 255, 0]);
assert_array_equals(hsl2rgb(60, 100, 25), [128, 128, 0]);
assert_array_equals(hsl2rgb(120, 100, 50), [0, 255, 0]);
assert_array_equals(hsl2rgb(120, 100, 25), [0, 128, 0]);
assert_array_equals(hsl2rgb(-240, 100, 50), [0, 255, 0]);
assert_array_equals(hsl2rgb(480, 100, 25), [0, 128, 0]);
assert_array_equals(hsl2rgb(180, 100, 50), [0, 255, 255]);
assert_array_equals(hsl2rgb(180, 100, 25), [0, 128, 128]);
assert_array_equals(hsl2rgb(-180, 100, 50), [0, 255, 255]);
assert_array_equals(hsl2rgb(540, 100, 25), [0, 128, 128]);
assert_array_equals(hsl2rgb(240, 100, 50), [0, 0, 255]);
assert_array_equals(hsl2rgb(240, 100, 25), [0, 0, 128]);
assert_array_equals(hsl2rgb(300, 100, 50), [255, 0, 255]);
assert_array_equals(hsl2rgb(300, 100, 25), [128, 0, 128]);

// hsl
// * { color: hsl(0, 100%, 50%) }   /* red */
// * { color: hsl(120, 100%, 50%) } /* lime */ 
// * { color: hsl(120, 100%, 25%) } /* dark green */ 
// * { color: hsl(120, 100%, 75%) } /* light green */ 
// * { color: hsl(120, 75%, 75%) }  /* pastel green, and so on */
assert_array_equals(colorType.fromCssValue('hsl(0, 0%, 100%)'), [255, 255, 255, 1.0], 'hsl(0, 0%, 100%)');
assert_array_equals(colorType.fromCssValue('hsl(0,0%,75%)'), [192, 192, 192, 1.0], 'hsl(0,0%,75%)');
assert_array_equals(colorType.fromCssValue('hsl(-0, 100%, 50%)'), [255, 0, 0, 1.0], 'hsl(0, 100%, 50%)');
assert_array_equals(colorType.fromCssValue('hsla(120, 100%, 50%, 0.0)'), [0, 255, 0, 0.0], 'hsl(120, 100%, 50%, 0.0)');
assert_array_equals(colorType.fromCssValue('hsla(120, 100%, 25%, 0.25)'), [0, 128, 0, 0.25], 'hsl(120, 100%, 25%, 0.25)');
assert_array_equals(colorType.fromCssValue('hsla(180, 100%, 50%, 0.5)'), [0, 255, 255, 0.5], 'hsl(180, 100%, 50%, 0.5)');
assert_array_equals(colorType.fromCssValue('hsla(180, 100%, 25%, 0.75)'), [0, 128, 128, 0.75], 'hsl(180, 100%, 25%, 0.75)');
assert_array_equals(colorType.fromCssValue('hsla(240, 100%, 50%, 1.0)'), [0, 0, 255, 1.0], 'hsl(240, 100%, 50%, 1.0)');
assert_array_equals(colorType.fromCssValue('hsla(240, 100%, 25%, 1.25)'), [0, 0, 128, 1.0], 'hsl(240, 100%, 25%, 1.25)');

assert_array_equals(colorType.fromCssValue('transparent'), [0, 0, 0, 0], 'transparent');

assert_equals(colorType.fromCssValue('#00'), undefined);
assert_equals(colorType.fromCssValue('#0f0g'), undefined);
assert_equals(colorType.fromCssValue('rgba(0, abc, 0, 0)'), undefined);
assert_equals(colorType.fromCssValue('asdf(0, 0, 0, 0)'), undefined);

// currentColor ????
}, 'colorType.cssFromValue');

</script>
